<template>
	<view class="tag_box">
		<view class="title_bar">
			<view class="title_bar_item" :class="{'title_bar_item_active':queryType==index}"
				@click="changeBarItem(index)" v-for="(item,index) in tagList" :key="index">
				<view class="tab">
					<view class="tab-inner"
						:class="queryType==index?'':queryType==0&&index==1?`tab-inner01`:queryType==1&&index==0?`tab-inner0012`:queryType==1&&index==2?`tab-inner0122`:queryType==2&&index==1?`tab-inner12`:''">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="queryType==0">
			<view class="tab_content">
				<view class="tab_label">
					<span class="star">*</span>机身条码
				</view>
				<view class="tab_tip" style="column-gap: 12rpx;">
					<uni-easyinput maxlength="20" primaryColor="rgb(192, 196, 204)" clearable :inputBorder="false"
						:trim="true" placeholder="请输入机身条码" placeholderStyle="font-size:28rpx;text-align: right;"
						v-model="scanVal"></uni-easyinput>
					<!-- <span>请选择机身条码</span> <uni-icons color="#aaa" type="right"></uni-icons> -->
					<uni-icons color="#aaa" size="20" @click="scanClick" type="scan"></uni-icons>
					<view class="" style="color: #007cff;" @click="inputSearch()">
						搜索
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="queryType==1">
			<view class="tab_content">
				<view class="tab_label">
					<span class="star">*</span>故障名称
				</view>
				<view class="tab_tip" @click="selectPolicy(queryType)">
					<span v-if="!goodsTypeVal">故障名称</span>
					<span v-else class="item-val">{{goodsTypeVal}}</span>
					<uni-icons color="#aaa" type="right"></uni-icons>
				</view>
			</view>
		</view>
		<view class="" v-if="queryType==2">
			<view class="tab_content">
				<view class="tab_label">
					<span class="star">*</span>商品型号
				</view>
				<view class="tab_tip" @click="selectPolicy(queryType)">
					<span v-if="!goodsTypeVal">请选择商品型号</span>
					<span v-else class="item-val">{{goodsTypeVal}}</span>
					<uni-icons color="#aaa" type="right"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref, onMounted, reactive, watch, nextTick
	} from "vue";
	import { onUnload, onShow, onLoad, onHide } from '@dcloudio/uni-app'
	import _ from "lodash";
	// 查询类型
	const queryType = ref(0)
	const scanVal = ref('')//按条码查
	// 切换查询
	const changeBarItem = (index) => {
		queryType.value = index
	}
	const tagList = ref([
		{ status: 1, name: '按条码查' },
		{ status: 2, name: '按名称查' },
		{ status: 3, name: '按型号查' }
	])
	const goodsTypeVal = ref('')
	// 条码查包修
	const scanClick = () => {
		uni.scanCode({
			scanType: ['qrCode', 'barCode'],//扫码类型
			success: async function (res) {
				scanVal.value = res.result
				// inputSearch()
			},
			fail: (err) => {
				// #ifdef H5
				uni.showToast({
					icon: 'none',
					title: '设备不支持此功能',
					duration: 3000
				})
				// #endif
			}
		})
	}
	const inputSearch = () => {

	}
	const selectPolicy = () => {

	}
</script>

<style lang="scss" scoped>
	$size: 10rpx;
	$size1: 20rpx;

	.tag_box {
		filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1));
		padding: 24rpx 30rpx;
		font-size: 28rpx;

		.title_bar {
			display: flex;
			justify-content: space-evenly;

			.title_bar_item {
				flex: 1;

				.tab {
					padding-top: 12rpx;

					.tab-inner {
						background-color: #e9edf5;
						padding: 22rpx;
						color: #777;
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;

						&:after {
							content: '';
							width: 100%;
							height: 100%;
							position: absolute;
							background-color: #fff;
							z-index: -1;
						}
					}
				}

				&:nth-child(1) {
					.tab-inner {
						border-radius: $size 0 0 0;
					}
				}

				&:nth-child(3) {
					.tab-inner {
						border-radius: 0 $size 0 0;
					}
				}

				.tab-inner01 {
					border-bottom-left-radius: $size1;
				}

				.tab-inner0012 {
					border-bottom-right-radius: $size1 !important;
				}

				.tab-inner0122 {
					border-bottom-left-radius: $size1 !important;
				}

				.tab-inner12 {
					border-bottom-right-radius: $size1;
				}

			}

			.title_bar_item_active {
				border-top-left-radius: $size1;
				border-top-right-radius: $size1;

				.tab {
					background-color: #FFFFFF;
					border-top-left-radius: $size1;
					border-top-right-radius: $size1;

					.tab-inner {
						color: #007cff;
						background-color: #ffffff;
					}
				}
			}
		}

		.tab_content {
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			padding: 4rpx 24rpx;
			height: 90rpx;
			border-radius: 0 0 $size $size;
			column-gap: 48rpx;
			border-top: 1px solid rgba(0, 0, 0, 0.05);

			.tab_label {
				display: flex;
				align-items: center;
				column-gap: 6rpx;

				.star {
					font-weight: bold;
					color: #dd542d;
				}
			}

			.tab_tip {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: #aaa;
				// column-gap: 12rpx;
				flex: 1;
				overflow: hidden;

				:deep(.uni-input-input) {
					text-align: right;
				}

				.item-val {
					text-align: right;
					color: #000;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					flex: 1;
				}
			}
		}
	}
</style>